<template>
    <div id="cart">
        <div class="content">
            <div class="content-left">
                <div class="logo-wrapper">
                    <div class="logo" :class="{'active': totalCount}" @click="toggleList">
                        <i class="icon-shopping_cart" :class="{'active': totalCount}"></i>
                    </div>
                    <div v-show="totalCount" class="num">{{totalCount}}</div>
                </div>
                <div class="price" :class="{'active': totalCount}">￥{{totalPrice}}</div>
                <div class="desc">另需配送费￥{{seller.deliveryPrice}}元</div>
            </div>
            <div class="content-right">
                <div class="pay" :class="{'active': payDesc === '去结算'}" @click="pay">{{payDesc}}</div>
            </div>
        </div>
        <div class="ball-container">
            <div v-for="item in balls">
                <transition @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
                    <div class="ball" v-show="item.show">
                        <div class="inner inner-hook">1</div>
                    </div>
                </transition>
            </div>
        </div>
        <transition name="fold">
            <div v-show="listShow" class="cart-list" :class="{'active': listShow}">
                <div class="list-header">
                    <h1 class="title">购物车</h1>
                    <span class="empty" @click="empty">清空</span>
                </div>
                <div class="list-content" ref="listScroll">
                    <ul>
                        <li v-for="item in selectFoods" class="food border-1px">
                            <span class="name">{{item.name}}</span>
                            <div class="price">
                                <span>￥{{item.price * item.count}}</span>
                            </div>
                            <div class="cartcontrol-wrapper">
                                <ry-cart-control :food="item" @cartAdd="cartAdd($event)"></ry-cart-control>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </transition>
        <transition name="fade">
            <div v-show="listShow" class="list-mask" @click="hideList"></div>
        </transition>
    </div>
</template>

<script>
    import BScroll from 'better-scroll'
    import RyCartControl from './../cartcontrol/Cartcontrol'

    const BALLLENTHG = 10;
    function ballLength() {
        let balls = [];
        for (let i = 0; i < BALLLENTHG; i++) {
            balls.push({show: false});
        }
        return balls;
    }

    export default {
        name: 'Cart',
        props: ['seller', 'selectFoods'],
        components: {
            RyCartControl
        },
        data() {
            return {
                balls: ballLength(),
                fold: true
            }
        },
        methods: {
            drop(el) {
                for (let i = 0; i < this.balls.length; i++) {
                    let ball = this.balls[i];
                    if(!ball.show) {
                        ball.show = true;
                        ball.el = el;
                        this.dropBalls.push(ball);
                        return;
                    }
                }
            },
            beforeDrop(el) {
                const ball = this.dropBalls[this.dropBalls.length - 1];
                const rect = ball.el.getBoundingClientRect();
                const x = rect.left - 32;
                const y = -(window.innerHeight - rect.top - 22);
                el.style.display = '';
                el.style.transform = el.style.webkitTransform = `translate3d(0, ${y}px, 0)`;
                const inner = el.getElementsByClassName('inner-hook')[0];
                inner.style.transform = inner.style.webkitTransform = `translate3d(${x}px, 0, 0)`;
            },
            dropping(el, done) {
                this.reflow = document.body.offsetHeight;
                el.style.transform = el.style.webkitTransform = `translate3d(0, 0, 0)`;
                const inner = el.getElementsByClassName('inner-hook')[0];
                inner.style.transform = inner.style.webkitTransform = `translate3d(0, 0, 0)`;
                el.addEventListener('transitionend', done);
            },
            afterDrop(el) {
                const ball = this.dropBalls.shift();
                if(ball) {
                    ball.show = false;
                    el.style.display = 'none';
                }
            },
            toggleList() {
                if (this.totalCount) this.fold = !this.fold;
            },
            cartAdd(target) {
                this.drop(target);
            },
            empty() {
                if(confirm("确定清空吗")) this.selectFoods.forEach(item => item.count = 0);
            },
            hideList() {
                this.fold = true;
            },
            pay() {
                if (this.totalPrice < this.seller.minPrice) return;
                alert(`需要支付￥${this.totalPrice + this.seller.deliveryPrice}元（含配送费）`);
            }
        },
        computed: {
            totalPrice() {
                return this.selectFoods.reduce((sum, item) => sum += item.price * item.count, 0);
            },
            totalCount() {
                return this.selectFoods.reduce((sum, item) => sum += item.count, 0);
            },
            payDesc() {
                if (this.totalPrice === 0) {
                    return `￥${this.seller.minPrice}元起送`;
                }else if(this.totalPrice < this.seller.minPrice) {
                    let diff = this.seller.minPrice - this.totalPrice;
                    return `还差￥${diff}元起送`;
                }else {
                    return '去结算';
                }
            },
            listShow() {
                if (!this.totalCount) {
                    this.fold = true;
                    return false;
                }else {
                    if (!this.fold) {
                        this.$nextTick(() => {
                            this.scroll ? this.scroll.refresh() : this.scroll = new BScroll(this.$refs.listScroll, {click: true});
                        })
                    }
                    return !this.fold;
                }
            }
        },
        created() {
            this.dropBalls = [];
        }
    }
</script>

<style scoped>
    #cart {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 3;
        width: 100%;
        height: 48px;
    }

    .content {
        display: flex;
        background-color: #141d27;
        font-size: 0;
        color: rgba(255, 255, 255, .4);
    }

    .content-left {
        flex: 1;
    }

    .logo-wrapper {
        display: inline-block;
        vertical-align: top;
        position: relative;
        top: -10px;
        margin: 0 12px;
        padding: 6px;
        width: 56px;
        height: 56px;
        box-sizing: border-box;
        border-radius: 50%;
        background-color: #141d27;
    }

    .logo {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        text-align: center;
        background-color: #2b343c;
    }

    .logo.active {
        background-color: rgb(0, 160, 220);
    }

    .icon-shopping_cart {
        line-height: 44px;
        font-size: 24px;
        color: #80858a;
    }

    .icon-shopping_cart.active,
    .price.active {
        color: #fff;
    }

    .num {
        position: absolute;
        top: 0;
        right: 0;
        width: 24px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        border-radius: 16px;
        font-size: 9px;
        font-weight: 700;
        color: #fff;
        background-color: rgb(240, 20, 20);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .4);
    }

    .content-left .price {
        display: inline-block;
        vertical-align: top;
        margin-top: 12px;
        line-height: 24px;
        padding-right: 12px;
        box-sizing: border-box;
        border-right: 1px solid rgba(255, 255, 255, .1);
        font-size: 16px;
        font-weight: 700;
    }

    .content-right {
        flex: 0 0 105px;
        width: 105px;
    }

    .desc {
        display: inline-block;
        vertical-align: top;
        margin: 12px 0 0 12px;
        line-height: 24px;
        font-size: 10px;
    }

    .pay {
        height: 48px;
        line-height: 48px;
        text-align: center;
        font-size: 12px;
        font-weight: 700;
        background-color: #2b333b;
    }

    .pay.active {
        background-color: #00b43c;
        color: #fff;
    }

    .ball {
        position: fixed;
        left: 32px;
        bottom: 22px;
        z-index: 2;
        transition: all .3s cubic-bezier(0.49, -0.29, 0.75, 0.41);
    }

    .inner {
        width: 19px;
        height: 19px;
        line-height: 19px;
        border-radius: 50%;
        background-color: rgb(0, 160, 220);
        transition: all .3s linear;
        color: #fff;
        text-align: center;
    }

    .cart-list {
        position: absolute;
        bottom: 48px;
        left: 0;
        z-index: -1;
        width: 100%;
    }

    .fold-enter-active,
    .fold-leave-active {
        transition: .5s ease;
    }

    .fold-enter-to,
    .fold-leave {
        transform: translateY(0);
    }
    
    .fold-enter,
    .fold-leave-to {
        transform: translateY(100%);
    }

    .list-header {
        height: 40px;
        line-height: 40px;
        padding: 0 18px;
        background-color: #f3f5f7;
        border-bottom: 1px solid rgba(7, 17, 27, .1);
    }

    .title {
        float: left;
        font-size: 14px;
        color: rgb(7, 17, 27);
    }

    .empty {
        float: right;
        font-size: 12px;
        color: rgb(0, 160, 220);
    }

    .list-content {
        padding: 0 18px;
        max-height: 136vw;
        background-color: #fff;
        overflow: hidden;
    }

    .food {
        position: relative;
        padding: 12px 0;
        box-sizing: border-box;
    }

    .food::after {
        content: '';
        width: 100%;
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        border-bottom: 1px solid rgba(7, 17, 27, .1);
    }

    .name {
        line-height: 24px;
        font-size: 14px;
        color: rgb(7, 17, 27);
    }

    .food .price {
        position: absolute;
        right: 90px;
        bottom: 12px;
        line-height: 24px;
        font-size: 14px;
        font-weight: 700;
        color: rgb(240, 20, 20);
    }

    .cartcontrol-wrapper {
        position: absolute;
        right: 0;
        bottom: 12px;
    }

    .list-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -2;
        backdrop-filter: blur(10px);
        background-color: rgba(7, 17, 27, .6);
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: .5s all;
    }
    
    .fade-enter,
    .fade-leave-to {
        background-color: rgba(7, 17, 27, 0);
        opacity: 0;
    }
    
    .fade-enter-to,
    .fade-leave {
        opacity: 1;
    }
</style>